<template>
	<view style="background-color: rgb(247,247,247);padding: 20upx;min-height: 100vh;">
		<u-tabs :list="list" :is-scroll="false" active-color="rgb(255,97,94)" :current="current" @change="change"
			name="title"></u-tabs>
		<scroll-view scroll-x>
			<view class="courseType">
				<view :class="Xindex==index?'courseTypeItem activeColor':'courseTypeItem'"
					v-for="(item ,index) in lists" :key="index" @click="changeType(index)">
					<view class="">
						{{item.title}}
					</view>
				</view>
			</view>
		</scroll-view>
		

			<view class="activity">
				<!-- 			<view class="title">
					活动
				</view> -->

				<view class="activityItem" v-for="(item ,index) in activityList" :key="index" @click="navCluster(item)">
					<view class="activityImg">
						<image :src="item.pic" mode="aspectFill">
						</image>
					</view>
					<view class="activityText">
						<view class="name">
							{{item.title}}
						</view>
						<view class="label">
							<view class="">
								{{item.school_title}}
							</view>
							<view class="">
								{{item.applicable}}
							</view>
							<view class="">
								{{item.pattern}}
							</view>
						</view>
						<view class="money">
							<text
								style="font-size: 26upx;">￥</text>{{item.code1!=-1&&item.code2!=-1?(item.price_a>item.price_b?item.price_b:item.price_a):item.code1==-1?item.price_b:item.price_a}}
						</view>
					</view>
					<view class="activityBtn">
						<view class="">
							<view class="pin" v-if="item.code1!=-1">
								拼
							</view>
							<view class="kan" v-if="item.code2!=-1">
								砍
							</view>
						</view>

					</view>
				</view>
			</view>

	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merch_id:'',
				code:true,
				activityList:[],
				list:[],
				lists:[],
				Xindex:0,
				current:0
			}
		},
		onLoad(e) {
			this.merch_id=e.merch_id
			this.newData()
		},
		methods: {
			newData(){
				this.$myRuquest('home/index/courses_list', {
					merch_id: this.merch_id,
					type: 2,
					num:10,
					page:this.activityList.length
				}, 'POST').then(res => {
					if (res.code == 400) {
					if (res.data.list.length != 10) this.code = false
						res.data.list.forEach(item => {
							item.code1 = item.type.indexOf('2')
							item.code2 = item.type.indexOf('3')
						})
						this.list = res.data.class
						this.list.forEach(item => {
							if (item.en) item.en.unshift({
								title: '全部'
							});
						})
						this.lists = this.list[0].en
							this.activityList.push(...res.data.list)	
					}
				})
			},
			
			changeType(index) {
				this.Xindex = index
			
				//活动课程请求
				this.$myRuquest('home/index/courses_list', {
					merch_id: this.merch_id,
					type: 2,
					num:4,
					aid: this.list[this.current].id,
					bid: this.lists[index].id || ''
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.activityList = res.data.list
						this.activityList.forEach(item => {
							item.code1 = item.type.indexOf('2')
							item.code2 = item.type.indexOf('3')
						})
					}
				})

				
			
			},
			change(index) {
				console.log(index)
				this.current = index;
				this.Xindex = 0
				this.lists = this.list[index].en
				//活动课程请求
				this.$myRuquest('home/index/courses_list', {
					merch_id: this.merch_id,
					type: 2,
					num:4,
					aid: this.list[index].id,
					bid: this.list[index].en[this.Xindex].id || ''
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.activityList = res.data.list
						
					}
				})

			
			},
			
			navCluster(item) {
				uni.navigateTo({
					url: `/pages/organizationDetails/clusterHelp/clusterHelp?id=${item.id}`
				});
			},
			onReachBottom(){
				if (this.code) {
					this.newData()
				}else{
					uni.showToast({
					    title: '已经到底了~',
							icon:'none'
					});
				}
			}
		}
	}
</script>

<style lang="less">
	.courseType {
	
		display: -webkit-box;
		background-color: #fff;
		// padding: 0 20upx;
		// padding-bottom: 20upx;
	
	
		.courseTypeItem {
			font-size: 24upx;
			font-weight: 900;
			background-color: rgb(247,247,247);
			color: rgb(115, 115, 115);
			margin: 10upx;
			border-radius: 8upx;
			transition: all .2s;
	
			view {
				padding: 5upx 10upx;
			}
		}
	}
	
		.activity {
			.activityItem {
				display: flex;
				position: relative;
				margin: 20upx 0;
				padding-bottom: 20upx;
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);

				.activityImg {
					width: 150upx;
					height: 150upx;
					border-radius: 12upx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.activityText {
					margin: 0 20upx;
					width: 500upx;

					.name {
						font-weight: 900;
					}

					.label {
						display: flex;
						font-size: 24upx;
						margin: 16upx 0;
						color: #767676;

						view {
							margin-left: 10upx;
							margin-right: 30upx;
							background-color: #F4F5F7;
							padding: 0 10upx;
							border-radius: 7upx;
						}

						// view:nth-child(1),
						// view:nth-child(2) {
						// 	border-right: 1upx solid #a8a8a8;

						// }


					}

					.money {
						color: rgb(255, 97, 94);
						font-weight: 900;
						margin-left: 10upx;
						font-size: 36upx;
					}
				}
			}

			.activityItem:last-child {
				border: none;
			}

		}
	.activityBtn {
		position: absolute;
		right: 20upx;
		// height: 100%;
		display: inline-block;

		>view:nth-child(1) {
			display: flex;
			font-size: 18upx;
			color: #fff;


			view {
				width: 30upx;
				height: 30upx;
				line-height: 30upx;
				border-radius: 4upx;
				text-align: center;
				margin-left: 20upx;
			}

			.pin {
				background: linear-gradient(to bottom right, rgb(254, 162, 120), rgb(253, 61, 93));

			}

			.kan {
				background: linear-gradient(to bottom right, rgb(254, 188, 128), rgb(254, 153, 47));
			}
		}
	}
	.activeColor {
		background-color: rgba(248, 95, 0, .1) !important;
		color: rgb(255,97,94) !important;
	
	}
</style>
